<!--底座-->
<template>
  <div class="pedestal" :class="skin">
    <div ref="pedestal1" class="pedestal1 wow fadeInDown" :data-wow-delay="7*duration+'s'"></div>
    <div class="pedestal2 wow fadeInDown" :data-wow-delay="6*duration+'s'"></div>
    <div class="pedestal3 wow fadeInDown" :data-wow-delay="5*duration+'s'"></div>
    <div class="pedestal4 wow fadeInDown" :data-wow-delay="4*duration+'s'"></div>
    <div class="pedestal5 wow fadeInDown" :data-wow-delay="3*duration+'s'"></div>
    <div class="pedestal6 wow fadeInDown" :data-wow-delay="2*duration+'s'"></div>
    <div class="pedestal7 wow fadeInDown" :data-wow-delay="1*duration+'s'"></div>
    <div class="pedestal8 wow fadeInDown" :data-wow-delay="0*duration+'s'"></div>
  </div>
</template>

<script>
import { gsap } from 'gsap'
export default {
  name: 'pedestal',
  props: {
    skin: {
      type: String,
      default () {
        return 'skin'
      }
    }
  },
  data () {
    return {
      duration: 0.2
    }
  },
  mounted () {
    gsap.to(this.$refs.pedestal1, {
      opacity: 0,
      duration: 1,
      yoyo: true,
      repeat: -1
    })
  }
}
</script>

<style lang="scss" scoped>
.pedestal {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  flex-direction: column;
  align-content: flex-start;
  height: 90px;
  position: relative;
  width: 100%;

  .pedestal1 {
    width: 70px;
    height: 37px;
    position: absolute;
    bottom: 45px;
    background: url("./assets/skin/bg1.png") center center no-repeat;
    background-size: 100% 100%;
  }

  .pedestal2 {
    width: 130px;
    height: 37px;
    position: absolute;
    bottom: 45px;
    background: url("./assets/skin/bg2.png") center center no-repeat;
    background-size: 100% 100%;
  }

  .pedestal3 {
    height: 26px;
    width: 65px;
    position: absolute;
    bottom: 35px;
    background: url("./assets/skin/bg3.png") center center no-repeat;
    background-size: 100% 100%;
  }

  .pedestal4 {
    height: 36px;
    width: 73px;
    position: absolute;
    bottom: 25px;
    background: url("./assets/skin/bg4.png") center center no-repeat;
    background-size: 100% 100%;

  }

  .pedestal5 {
    height: 50px;
    width: 95px;
    position: absolute;
    bottom: 20px;
    background: url("./assets/skin/bg5.png") center center no-repeat;
    background-size: 100% 100%;

  }

  .pedestal6 {
    height: 32px;
    width: 82px;
    position: absolute;
    bottom: 25px;
    background: url("./assets/skin/bg6.png") center center no-repeat;
    background-size: 100% 100%;

  }

  .pedestal7 {
    height: 39px;
    width: 99px;
    position: absolute;
    bottom: 20px;
    background: url("./assets/skin/bg7Animate.png") center center no-repeat;
    background-size: 100% 100%;

  }

  .pedestal8 {
    height: 40px;
    width: 101px;
    position: absolute;
    bottom: 20px;
    background: url("./assets/skin/bg8.png") center center no-repeat;
    background-size: 100% 100%;
  }
}

.pedestal.skin2 {

  .pedestal1 {
    background: url("./assets/skin2/bg1.png") center center no-repeat;
    background-size: 100% 100%;
  }

  .pedestal2 {
    background: url("./assets/skin2/bg2.png") center center no-repeat;
    background-size: 100% 100%;
  }

  .pedestal3 {
    background: url("./assets/skin2/bg3.png") center center no-repeat;
    background-size: 100% 100%;
  }

  .pedestal4 {
    background: url("./assets/skin2/bg4.png") center center no-repeat;
    background-size: 100% 100%;

  }

  .pedestal5 {
    height: 30px;
    width: 75px;
    background: url("./assets/skin2/bg5.png") center center no-repeat;
    background-size: 100% 100%;
    bottom: 28px;
  }

  .pedestal6 {
    background: url("./assets/skin2/bg6.png") center center no-repeat;
    background-size: 100% 100%;

  }

  .pedestal7 {
    background: url("./assets/skin2/bg7Animate.png") center center no-repeat;
    background-size: 100% 100%;

  }

  .pedestal8 {
    background: url("./assets/skin2/bg8.png") center center no-repeat;
    background-size: 100% 100%;
  }
}

.pedestal.skin3 {

  .pedestal1 {
    background: url("./assets/skin3/bg1.png") center center no-repeat;
    background-size: 100% 100%;
  }

  .pedestal2 {
    background: url("./assets/skin3/bg2.png") center center no-repeat;
    background-size: 100% 100%;
  }

  .pedestal3 {
    background: url("./assets/skin3/bg3.png") center center no-repeat;
    background-size: 100% 100%;
  }

  .pedestal4 {
    background: url("./assets/skin3/bg4.png") center center no-repeat;
    background-size: 100% 100%;

  }

  .pedestal5 {
    height: 39px;
    width: 84px;
    background: url("./assets/skin3/bg5.png") center center no-repeat;
    background-size: 100% 100%;
  }

  .pedestal6 {
    background: url("./assets/skin3/bg6.png") center center no-repeat;
    background-size: 100% 100%;

  }

  .pedestal7 {
    background: url("./assets/skin3/bg7Animate.png") center center no-repeat;
    background-size: 100% 100%;

  }

  .pedestal8 {
    background: url("./assets/skin3/bg8.png") center center no-repeat;
    background-size: 100% 100%;
  }
}
</style>
